<template>
  <div class="allNav">
    <div style="width: 100%; height: 60px">
      <div class="user">
        <span
          style="
            float: left;
            margin-top: 17px;
            margin-left: 50px;
            font-size: 20px;
            font-family: fantasy;
          "
        >
          💎💎🧚‍♀️🧚‍♀️💙💙啊嘛妮妮主页-amnn💜💜👩‍🦳👩‍🦳💎💎 当前组件路径{{ $route.path }}
          {{ data.istrue }}
        </span>
        <span class="hyuser">——storyteller</span>
      </div>
    </div>
    <div class="navHeader" @wheel="handleScroll">
      <div>
        <PersonInfo />
      </div>
      

      <!-- <div>
        <PersonInfo2 />
      </div>
      <div>
        <PersonInfo3 />
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import PersonInfo from './PersonInfo.vue'
import PersonInfo2 from './PersonInfo2.vue'
import PersonInfo3 from './PersonInfo3.vue'
import { onMounted, onUnmounted, reactive } from 'vue'
import { useRouter } from 'vue-router'

const data = reactive({})
// const handleScroll = (event: WheelEvent) => {
//   const delta = Math.sign(event.deltaY)

//   if (delta > 0) {
//     // router.go(1) // 向下滚动，前进到下一个路由
//     data.istrue += 3
//     console.log('下一页')
//     console.log()
//   } else if (delta < 0) {
//     // router.go(-1) // 向上滚动，后退到上一个路由
//     data.istrue -= 3
//     console.log('上一页')
//   }
// }
const router = useRouter()

onMounted(() => {
  // window.addEventListener('wheel', handleScroll)
})

onUnmounted(() => {
  // window.removeEventListener('wheel', handleScroll)
})
</script>

<style lang="less" scoped>
.navHeader {
  width: 100vw;
  height: 100vh;
  border-radius: 3%;
  padding-bottom: 20px;
  background-color: #a28fee00;
  box-shadow: 0 15px 15px rgba(240, 242, 176, 0.388);
}
// .navHeader .el-menu {
//   margin-left: 30px;
// }]
.nav {
  position: relative;
  margin-top: 10px;
}
// /deep/ .el-menu {
//   background-color: #fbf7df;
//   margin-left: 20px;
//   float: left;
//   display: inline-block;
//   width: 100%;
//   height: 60px;
// }
// /deep/.el-submenu {
//   position: relative;
// }

.user {
  float: right !important;
  line-height: 30px !important;
}

.hyuser {
  float: left;
  font-family: fantasy;
  width: 400px;
  height: 40px;
  margin-top: 15px;
  margin-left: 850px;
  display: inline-block;
}
// .user .el-button {
//   margin-top: 10px;
//   float: right !important;
//   margin-right: 40px;
// }

// el-menu {
//   list-style: none;
//   position: relative;
//   margin: 0;
//   padding-left: 0;
//   background-color: #fff;
//   width: 300px;
//   display: inline-block;
//   background-color: #fff2cc;
// }

.dropmenu {
  background-color: #deac15;
}
</style>
